<template>
  <div style="display: inline-block; margin: 10px 15px;">
    <el-card :body-style="{ padding: '0px' }" class="speaker-box" @click.native="dialogVisible = true" shadow="never">
      <span slot="header" style="font-size:18px;"> {{ hname }} </span>
      
      <div class="box-img">
        <img 
          :src="avatar"  
          style="max-width: 300px;height: 400px; border-radius:5px;"
        />
      </div>
      <div style="margin-top: -5px;">
        <span style="font-size:16px;">{{synopsis}}</span>
      </div>
    </el-card>
    <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->

    <!-- <el-dialog
      :title="hname"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <div class="more-info" v-html="moreInfo"></div>
    </el-dialog> -->


  </div>
</template>

<script>
export default { 
  props: {
    hname : {type:String,default:"hname"},
    name : {type:String,default:"name"},
    synopsis : {type:String,default:"synopsis"},
    imgUrl: {type:String,default:""},
    moreInfo: {type:String,default:""},
  },
  data() {
    return {
      dialogVisible: false,
      avatar: "https://dummyimage.com/135x180/ff6a00/fff"
    };
  },
  methods: {
    // handleClick(){
    //   this.dialogVisible = true;
    //   console.log(this.dialogVisible);
    // }
  },
  created(){
    if (this.imgUrl !== "") {
      this.avatar = this.imgUrl
    }
  }

};
</script>

<style lang="less" scoped>
@card-width: 300px;
@card-height: 320px;

.speaker-box{
  text-indent: 0;
  text-align: center;
}

.el-card{
  width: @card-width;min-height: @card-height; border-radius:20px;
  background-color: #004e73;
  color: #fff;
  border:none;
  /deep/.el-card__header {text-align: center; padding: 8px 20px; border-bottom:none;font-weight: bold;}

}

/deep/.el-dialog__body{
  padding: 5px 20px;
}


.more-info{ word-break:keep-all; }


// /deep/.hname{ text-align: center !important; }
// /deep/.hname {
//   p {
//     font-weight: bold;
//     padding: 0px 15px !important;
//     text-align: center !important; 
//   }
// }

</style>
